<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验5：图片的DOM操作</title>
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			fieldset p{width: 225px;word-wrap:break-word;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li><img src="img/doc.gif">获取原始图片路径</li>
					<li><img src="img/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li><img src="img/doc.gif">创建图片</li>
					<li><img src="img/doc.gif">克隆图片</li>
					<li><img src="img/doc.gif">改变图片</li>
					<li><img src="img/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li><img src="img/doc.gif">为原始图片加上行间样式</li>
					<li><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="img/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//菜单收缩与扩展
			function show(item) {
				let currentMenu = document.getElementById(item);
				let currentStatus = currentMenu.style.display;
				currentMenu.style.display = currentStatus == "" ? "none" : "";
			}	
			//189000561朱一月
			let fruit = document.getElementById("fruit");//获取id为fruit的元素
			let menu1 = document.getElementById("menu1");//获取menu1
			let lis1 = menu1.getElementsByTagName("li");//获取menu1下面的li
			//得到图片路径并写入第二个框框中
			lis1[0].addEventListener("click",()=>{
				document.getElementById("msg1").innerHTML = fruit.src;//将得到的内容展示在网页上
			})
			//得到选中的内容
			lis1[1].addEventListener("click",()=>{
				let input = document.querySelectorAll("input");
				let msg2 = document.querySelector("#msg2");
				//获取input中checked对应的value值，并通过添加子节点的方式展现出来
				for ( x in input){
					if(input[x].checked == true && input[x].value != undefined){
						let p = document.createElement("p");
						p = input[x].value + " ";
						msg2.append(p);//将p标签添加在msg2后的节点
					}
				}	
			})
			let menu2 = document.getElementById("menu2");//获取menu2
			let lis2 = menu2.getElementsByTagName("li");//获取menu2下面的li
			//创建图片
			lis2[0].addEventListener("click",()=>{	
		　　　　let msg3 = document.getElementById("msg3");//获取要插入图片标签的id
		　　　　let img = document.createElement("img");//创建 img
		　　　　img.src = "img/grape.jpg";//设置 img 图片地址
		　　　　msg3.appendChild(img);//将img添加到msg3
			})
			//克隆图片
			lis2[1].addEventListener("click",()=>{
				let msg4 = document.getElementById("msg4");//获取要克隆图片道德位置的id
				msg4.appendChild(fruit.cloneNode());//将克隆的图片插入到目标位置
			})
			//改变图片
			lis2[2].addEventListener("click",()=>{
				let imgs = document.querySelectorAll("fieldset img");
				for (x in imgs){//判断图片路径，并修改
					if(imgs[x].src == "file:///D:/project2/yiyue/my_web/exp5/img/fruit.jpg"){
						imgs[x].src = "img/grape.jpg";
					}else if(imgs[x].src =="file:///D:/project2/yiyue/my_web/exp5/img/grape.jpg"){
						imgs[x].src = "img/fruit.jpg"
					}
				}
			})
			//删除图片
			lis2[3].addEventListener("click",()=>{
				fruit.parentNode.removeChild(fruit);//删除节点
			})
			let menu3 = document.getElementById("menu3");//获取menu3
			let lis3 = menu3.getElementsByTagName("li");//获取menu3下面的li
			//给原始图片加行间样式
			lis3[0].addEventListener("click",()=>{
				fruit.style.border = " 5px solid red";//行间样式
			})
			//为所有的fieldset加上内部样式
			let fieldset = document.querySelectorAll("fieldset");
			lis3[1].addEventListener("click",()=>{
				for (x in fieldset){
					fieldset[x].className = "newcss1";
				}
			})	 
		</script>
	</body>
</html>
